<script lang="ts">
export default {
  name: "TabBar",
};
</script>

<script setup lang="ts">
import { reactive, ref, PropType } from "vue";
import {usePiniaState} from '@/store/index'
interface tabProps {
  title: string;
  to: string;
  name: string;
  icon: string;
}
const store = usePiniaState()
const props = defineProps({
  data: {
    type: Array as PropType<tabProps[]>,
    default: [
      {
        title: "外卖",
        to: {
          name: "Msite",
        },
        icon: "home-o",
      },
      {
        title: "搜索",
        to: {
          name: "Search",
        },
        icon: "search",
      },
      {
        title: "订单",
        to: {
          name: "Order",
        },
        icon: "orders-o",
      },
      {
        title: "我",
        to: {
          name: "Profile",
        },
        icon: "user-o",
      },
    ],
  },
});


const emit = defineEmits(["chang"]);

const active = ref("home");

const onChange = value => {
  // console.log(value,'value');

  emit("chang", value);
};

//标签修改样式
const themeVars = {
  TabbarItemFontSize: "0.28rem",
  TabbarItemIconSize: "21px",
  tabbarHeight: '48px'
};
</script>

<template>
  <van-config-provider :theme-vars="themeVars" v-show="store.tabBarIsShow">
    <van-tabbar fixed route v-model="active" @change="onChange">
      <van-tabbar-item
        v-for="(item, index) in props.data"
        :to="item.to"
        :name="item.name"
        :key="index"
        :icon="item.icon"
        >{{ item.title }}</van-tabbar-item
      >
    </van-tabbar>
  </van-config-provider>
</template>

<style lang="scss" scoped></style>
